<template>
  <div class="container">
    <div class="tabs">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab', { active: currentTab === index }]"
        @click="currentTab = index"
      >
        {{ tab.name }}
      </div>
    </div>
    <div class="content">
      <component :is="tabs[currentTab].component" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import GaodeColorMap from './GaodeColorMap.vue'
import AnimatedMarkerMap from './AnimatedMarkerMap.vue'
import WebGLTileMap from './WebGLTileMap.vue'
import GpxMap from './GpxMap.vue'
import HeatmapMap from './HeatmapMap.vue'
import Map from './Map.vue'
import FlowMap from './FlowMap.vue'
import StreamLineMap from './StreamLineMap.vue'
import TextureFlowMap from './TextureFlowMap.vue'
import ClusterMap from './ClusterMap.vue'
import LayerSwipeMap from './LayerSwipeMap.vue'
import DraggableIconMap from './DraggableIconMap.vue'
import BoxSelectMap from './BoxSelectMap.vue'
import ModifyGeometryMap from './ModifyGeometryMap.vue'
import SpyglassMap from './SpyglassMap.vue'
import OverviewMap from './OverviewMap.vue'
import GeojsonClipMap from './GeojsonClipMap.vue'
import LargePointMap from './LargePointMap.vue'
import ResolutionSwitchMap from './ResolutionSwitchMap.vue'
import OpenFlightsAnimation from './OpenFlightsAnimation.vue'
import LargeVertexMap from './LargeVertexMap.vue'

const currentTab = ref(0)

const tabs = [
  { name: '动态标记点', component: AnimatedMarkerMap },
  { name: '高德变色', component: GaodeColorMap },
  { name: 'WebGL瓦片', component: WebGLTileMap },
  { name: 'GPX轨迹', component: GpxMap },
  { name: '热力图', component: HeatmapMap },
  { name: '路径动画', component: Map },
  { name: '飞线动画', component: FlowMap },
  { name: '流线动画', component: StreamLineMap },
  { name: '纹理流动', component: TextureFlowMap },
  { name: '点聚合', component: ClusterMap },
  { name: '图层对比', component: LayerSwipeMap },
  { name: '图标拖拽', component: DraggableIconMap },
  { name: '框选工具', component: BoxSelectMap },
  { name: '几何编辑', component: ModifyGeometryMap },
  { name: '望远镜', component: SpyglassMap },
  { name: '鹰眼图', component: OverviewMap },
  { name: 'GeoJSON裁剪', component: GeojsonClipMap },
  { name: '海量点', component: LargePointMap },
  { name: '分辨率切换', component: ResolutionSwitchMap },
  { name: '航线动画', component: OpenFlightsAnimation },
  { name: '海量顶点', component: LargeVertexMap }
]
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: #111;
}

.tabs {
  width: 120px;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 100vh;
}

.tab {
  padding: 12px 20px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  border-left: 3px solid transparent;
}

.tab:hover {
  color: #00eaff;
  background: rgba(0, 234, 255, 0.1);
}

.tab.active {
  color: #00eaff;
  background: rgba(0, 234, 255, 0.1);
  border-left-color: #00eaff;
}

.content {
  flex: 1;
  position: relative;
  overflow: hidden;
}
</style>

<script lang="ts">
export default {
  name: 'MapContainer'
}
</script> 